<!DOCTYPE html>
<html lang="en">
<head>
<title>小周OJ</title>
<!-- custom-theme -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>	
		
<!-- For Testimonials slider -->
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="all" />
<!-- //For Testimonials slider -->
<!-- //custom-theme files-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- //custom-theme files-->

<!-- font-awesome-icons -->
<link href="css/font-awesome.css" rel="stylesheet"> 
<!-- //font-awesome-icons -->
<!-- googlefonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&amp;subset=latin-ext,vietnamese" rel="stylesheet">
<!-- //googlefonts -->

</head>
<body>
		
<!-- banner -->


		<!-- Top-Bar -->
				<div class="top">
					<div class="container">
							</div>
							<div class="clearfix"></div>
						
					</div>
				</div>
				<div class="top-bar">
				<div class="container">
					<div class="header">
						<nav class="navbar navbar-default">
							<div class="navbar-header navbar-left">
								<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
									<span class="sr-only">Toggle navigation</span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
								</button>
								<h1><a class="navbar-brand" href="index.html"> Practice </span></a></h1>
							</div>
						</nav>
				</div>
			</div>
		</div>
		<!-- //Top-Bar -->
		<!-- w3-banner -->
	<div class="banner">
		<div class="banner-dott1">
			<div class="w3-banner">
			
				<div  class="callbacks_container">
				<ul class="rslides" id="slider3">
					<li>
						<div class="banner-text">
					
							<h3>小周 OJ 练习</h3>
							<p>基于 java Servlet实现的 OJ 系统.</p>
							<a href="https://gitee.com/xiangmeng-is-working-hard/java-demo/tree/master/online_OJ" class="read-agileits" data-toggle="modal">项目链接</a>
						</div>
					</li>
					<li>
						<div class="banner-text">
					
							<h3>努力写题</h3>
							<p>To invest 100% in one thing.</p>
							<a href="https://gitee.com/xiangmeng-is-working-hard/java-demo/tree/master/online_OJ" class="read-agileits" data-toggle="modal">项目链接</a>
						</div>
					</li>
					<li>
						<div class="banner-text">
					
							<h3>你一定可以成为你想成为的人</h3>
							<p>努力经营当下，直至未来明朗.</p>
							<a href="https://gitee.com/xiangmeng-is-working-hard/java-demo/tree/master/online_OJ" class="read-agileits" data-toggle="modal">项目链接</a>
						</div>
					</li>
				</ul>
			</div>	
			
			</div>
					
		<!-- //w3-banner -->
		</div>
	</div>

<!-- banner-bottom -->

<!-- //banner-bottom -->

<!-- pricing -->
<section class="my-5">
	<div class="wthree-agile-counter">
		
		<div class="row mt-12 w3_agile_stats_grid-top">
			<div class="w3_agile_stats_grid">
				<div class="container" id="problemDesc">
						<!-- <h3 class="w3l_header">题目列表</h3>
						<p> 永远保持热忱，永远保持热爱！继续加油吧少年！</p> -->
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	
	<div class="pricing-grids-info">
		<label for="codeEditor">代码编辑框</label>
		<div id="editorACE" style="min-height:400px">
			<textarea class="form-control" id="codeEditor" style="width: 100%; height: 400px;"></textarea>
		</div>
		<div class="clearfix"> </div>
	</div>
			
	<!-- <div class="zb pricing-grid"> -->
		<div class="more">
			<a href="#" id="submit">提交</a>
			<!-- <button type="button" id="submit">提交</button> -->
		</div>
			<!-- </div> -->
		</div> 			
		<div class="clearfix"> </div> 
				<!--End-slider-script-->
			</div>
		</div>	

		<!-- 代码结果 -->
		<div class="wthree-agile-counter">
			<div class="row mt-12 w3_agile_stats_grid-top">
				<div class="w3_agile_stats_grid">
					<div class="container" >
						<!-- 结果的分行 -->
						<pre id="problemResult">

						</pre>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>

	</div>	
</section>
	
	<!--//pricing-->

	<!-- counter -->
	<!-- 代码结果,图片影响 -->
	<!-- <div class="services-bottom stats services">
	
		<div class="container" id="problemResult">
		  <div class="wthree-agile-counter">
		  <div class="col-md-12 w3_agile_stats_grid-top">
			<div class="w3_agile_stats_grid">
				<div class="container">
					<div class="wthree_head_section" >
						 <h3 class="w3l_header">题目列表</h3>
						<p> 永远保持热忱，永远保持热爱！继续加油吧少年！</p> 
					</div>
					
				</div> 	
				<div class="clearfix"> </div>
				
			</div>
		</div>
		</div>
	</div>
</div> -->
<!-- //counter -->


<!-- Clients -->

<!-- //Clients -->
<!-- footer -->
	
	<div class="agileinfo_copyright">
		<p>Copyright &copy; 2023.By Xianmeng.</p>
	</div>
<!-- //footer -->

<!-- bootstrap-modal-pop-up -->
	
<!-- //bootstrap-modal-pop-up --> 
<!-- js -->
	<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
	<!-- for bootstrap working -->
	<script src="js/bootstrap.js"></script>
	<!-- //for bootstrap working -->
<!-- //js -->
<!-- //here starts scrolling icon -->
<script src="js/SmoothScroll.min.js"></script>
	<script type="text/javascript" src="js/move-top.js"></script>
	<script type="text/javascript" src="js/easing.js"></script>
	<!-- here stars scrolling script -->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
				var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
				};
			*/
								
			$().UItoTop({ easingType: 'easeOutQuart' });
								
			});
	</script>
	<!-- //here ends scrolling script -->
<!-- //here ends scrolling icon -->

<!-- scrolling script -->
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script> 
<!-- //scrolling script -->
<!-- responsiveslides -->
<script src="js/responsiveslides.min.js"></script>
			<script>
									// You can also use "$(window).load(function() {"
									$(function () {
									 // Slideshow 4
									$("#slider3").responsiveSlides({
										auto: true,
										pager: false,
										nav: true,
										speed: 500,
										namespace: "callbacks",
										before: function () {
									$('.events').append("<li>before event fired.</li>");
									},
									after: function () {
										$('.events').append("<li>after event fired.</li>");
										}
										});
										});
			</script>
<!-- //responsiveslides -->
<!-- stats -->
	<script src="js/jquery.waypoints.min.js"></script>
	<script src="js/jquery.countup.js"></script>
		<script>
			$('.counter').countUp();
		</script>
<!-- //stats -->
<!-- FlexSlider-JavaScript -->
	<script defer src="js/jquery.flexslider.js"></script>
	<script type="text/javascript">
		
				$(window).load(function(){
				$('.flexslider').flexslider({
					animation: "slide",
					start: function(slider){
						$('body').removeClass('loading');
					}
			});
		});
	</script>
<!-- //FlexSlider-JavaScript -->

<!-- 引入ace.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.2.9/ace.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.2.9/ext-language_tools.js"></script>

	<script>
		// 拿到当前页面的query string
		console.log(location.search);

		// 进行ace代码编辑框的嵌入
		function initAce() {
			// 参数editorACE 就对应到刚才在html里加的那个div的id
			let editor = ace.edit("editorACE");
			editor.setOptions({
				enableBasicAutocompletion: true,
				enableSnippets: true,
				enableLiveAutocompletion: true
			});
			editor.setTheme("ace/theme/twilight");
			editor.session.setMode("ace/mode/java");
			editor.resize();
			// 注意：这里的ById参数也是要对应到刚才在html里加的那个div的id！！
			document.getElementById('editorACE').style.fontSize='20px';

			return editor;
		}

		let editorACE = initAce();

		// 通过ajax的方式从服务器获取题目详情
		function getProblem() {
			// 1. 先通过ajax给服务器发送一个请求
			$.ajax({
				url: "problem" + location.search,
				type: "GET",
				success: function(data, status) {// 这是一个回调函数
					// data是题目详情，是JSON格式的对象，status是响应的状态码
					// 2. 把得到的响应数据构造成HTML片段
					makeProblemDetail(data);
				}
			});
		}

		// 通过该函数把数据转换成HTML页面片段
		function makeProblemDetail(problem) {
			// 首先添加题目详细要求
			// 1. 获取到problemDesc，把题目详情填写进去
			let problemDesc = document.querySelector("#problemDesc");

			// 题目+难度
			let h3 = document.createElement("h3");
			h3.innerHTML = problem.id + "." + problem.title + "_" + problem.level;
			problemDesc.appendChild(h3);

			// 题目详细描述:为了完成换行，再套一层<pre>标签
			let pre = document.createElement("pre");
			let p = document.createElement("p");
			p.innerHTML = problem.description;
			pre.appendChild(p);
			problemDesc.appendChild(pre);

			// 2. 把代码的模板填写到代码编辑框中
			// let codeEditor = document.querySelector("#codeEditor");
			// codeEditor.innerHTML = problem.templateCode;
			editorACE.setValue(problem.templateCode);

			// 3. 如果提交是按钮，在这里就需要给按钮注册一个点击事件
			let submit = document.querySelector("#submit");
			submit.onclick = function() {
				// 发送请求的内容
				let body = {
					id: problem.id,
					// 这里使用value属性来获取到实时代码
					// code: codeEditor.value
					code: editorACE.getValue()
				};
				// 点击这个按钮，就要进行提交（把编辑框的内容提交到服务器上
				$.ajax({
					type: "POST",
					url: "compile",
					data: JSON.stringify(body), // 发过去的是id，code
					success: function(data, status) { 
						// 进行响应:error/reason/stdout
						let problemResult = document.querySelector("#problemResult");
						if(data.error == 0) {
							// 编译运行没有问题，将stdout显示到后面的运行结果区
							problemResult.innerHTML = data.stdout;
						} else {
							// 编译运行有问题，将reason显示到后面的运行结果区
							problemResult.innerHTML = data.reason;
						}
					}
				});
			}

		}

		getProblem();
	</script>
</body>
</html>

